<template>
    <div class="main">
        <div class="detail">
            <div class="detail-main">
                <div class="cover">
                    <div class="cover-img">
                        <el-image :src="playlist.coverImgUrl" v-if="playlist"></el-image>
                    </div>
                    <div class="cover-desc">
                        <h4>标签</h4>
                        <div class="cover-tags">
                            <a @click="router.push(`/playlist?cat=${tag}`)" class="tag" v-for="tag in playlist.algTags"
                                :key="tag">#{{ tag }}</a>
                        </div>
                        <h4>更新时间</h4>
                        <p>{{ formartDate(playlist.updateTime, 'yyyy-MM-dd HH:mm:ss') }}</p>
                        <h4>喜欢这个音乐的人</h4>
                        <div class="sub-playlist">
                            <a @click="router.push(`/home?id=${sub.id}`)" class="author-home"
                                v-for="sub in playlist.subscribers" :key="sub">
                                <el-image :src="sub.avatarUrl"></el-image>
                            </a>
                        </div>
                        <h4>介绍</h4>
                        <pre class="cover-desc-all">
                        {{ playlist.description }}
                    </pre>
                    </div>
                </div>
                <div class="cover-info">
                    <div class="cover-header">
                        {{ playlist.name }}
                    </div>
                    <div class="cover-author">
                        <a @click="router.push(`/home?id=${playlist.creator.userId}`)" class="author-home">
                            <el-image :src="playlist.creator.avatarUrl" v-if="playlist.creator" class="cover-avatar">

                            </el-image>
                        </a>
                        <div class="cover-name">
                            <a @click="router.push(`/home?id=${playlist.creator.userId}`)" class="author-home">
                                {{ playlist.creator.nickname }}
                            </a>
                            <el-image :src="playlist.creator.avatarDetail.identityIconUrl"
                                v-if="playlist.creator.avatarDetail" class="cover-avatarIcon "></el-image>
                        </div>
                        <div class="cover-date">{{ formartDate(playlist.createTime, 'yyyy-MM-dd HH:mm:ss') }}创建</div>
                        <div class="cover-digital">
                            <span class="cover-playCount">
                                <i class="iconfont icon-tingge"></i>
                                {{ formartNum(playlist.playCount) }}次播放
                            </span>
                            <span class="cover-collect">
                                <i class="iconfont icon-aixin1"></i>
                                {{ formartNum(playlist.subscribedCount) }}次收藏
                            </span>
                            <span class="cover-comment">
                                <i class="iconfont icon-liaotian"></i>
                                {{ formartNum(playlist.commentCount) }}条评论
                            </span>
                        </div>
                    </div>
                    <div class="song-main">
                        <div class="song-header">
                            <h4>歌曲列表 <em>{{ playlist.trackCount + '首歌' }}</em></h4>
                            <span class="play-all" @click="playAll"><i class="iconfont icon-bofang2"></i> 播放全部</span>
                            <span :class="['collect', playlist.subscribed ? 'active' : '']"
                                @click="likeSongList(playlist)"><i
                                    :class="['iconfont', 'icon-aixin3' + (playlist.subscribed ? '-active' : '')]"></i>
                                {{
                                    playlist.subscribed ? '已收藏' : '收藏' }}</span>
                        </div>
                        <SongListBig :songList="listsong"></SongListBig>
                        <div class="footer" style="text-align: center; margin-top: 20px;" v-if="useCookie().cookie == null">
                            <el-button @click="useUser().loginfrom = true">登录查看完整歌曲</el-button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="detail-aside">
                <!-- 相似歌单 -->
                <div style="border-left: 5px solid black; padding-left: 10px;margin-bottom: 20px;"
                    v-if="playlists.length > 0">相关类似歌单
                </div>
                <div class="songlist" v-if="playlists.length > 0">
                    <div class="song" v-for="item in playlists" :key="item">
                        <el-row :gutter="0">
                            <el-col :span="4">
                                <el-image :src="item.coverImgUrl" class="song-img" :fit="'cover'"></el-image>
                            </el-col>
                            <el-col :span="20">
                                <div>
                                    <el-link @click="router.push('/playlist/detail?id=' + item.id)"
                                        :title="item.description" class="song-name" type="info">
                                        {{ item.name }}
                                    </el-link>
                                </div>
                                <div>
                                    <el-link @click="router.push('/singer/detail?id=' + item.creator.userId)"
                                        :title="item.creator.nickname" class="creator-name" type="info">
                                        by. {{ item.creator.nickname }}
                                    </el-link>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>

                <div style="border-left: 5px solid black; padding-left: 10px;margin-bottom: 20px; margin-top: 40px;"
                    v-if="hotComments.length > 0">歌单热门评论
                </div>
                <SongComment :commentList="hotComments" v-if="hotComments.length > 0"></SongComment>
            </div>
        </div>
    </div>
</template>

<script setup>
import SongComment from '@/components/playlist/SongComment.vue'
import SongListBig from '@/components/song/SongListBig.vue'
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { playlistDetail, subscribePlaylist, relatedPlaylist, getHotComments } from '@/api/playlist'
import { formartNum, formartDate, formatSongDetail } from '@/utils/util'
import { useUser } from '@/stores/user'
import { useCookie } from '@/stores/cookie'
import { usePlayList, usePlayIndex } from '@/stores/playlist'
import { ElMessage } from 'element-plus'
const playlist = ref({
    coverImgUrl: '',
    algTags: [],
    updateTime: '',
    subscribers: [],
    description: '',
    name: '',
    creator: {
        userId: '',
        avatarUrl: '',
        nickname: '',
        avatarDetail: {
            identityIconUrl: ''
        }
    },
    createTime: '',
    playCount: '',
    subscribedCount: '',
    commentCount: '',
    trackCount: '',
    subscribed: '',
    tracks: []
})
const listsong = ref([])
const router = useRouter()
const route = useRoute()
const playList = usePlayList()
const playIndex = usePlayIndex()
const playlists = ref([])
const hotComments = ref([])
onMounted(async () => {
    const res = await playlistDetail({ id: route.query.id, t: Date.now(), cookie: true })
    // console.log(res)
    playlist.value = res.playlist
    listsong.value = playlist.value.tracks
    listsong.value = listsong.value.map(item => formatSongDetail(item))
    const res2 = await relatedPlaylist({ id: route.query.id })
    playlists.value = res2.playlists
    const res3 = await getHotComments({ id: route.query.id, type: 2 })
    hotComments.value = res3.hotComments
})

const playAll = () => {
    playList.playlist = listsong.value
    setTimeout(() => {
        playIndex.playIndex = 1
        playIndex.playIndex = 0
    }, 100)
}
const likeSongList = async (item) => {
    const res = await subscribePlaylist({ id: item.id, t: item.subscribed ? 2 : 1, timestamp: Date.now() })

    if (res.code !== 200) {
        return ElMessage.error('数据请求失败')
    }

    playlist.value.subscribed = !playlist.value.subscribed
}
</script>

<style lang="less" scoped>
.main {
    height: calc(100vh - 60px);
}

.detail {
    padding: 40px 20px;
    position: relative;
    margin-bottom: 40px;
    display: flex;
    // min-height: 320px;
    // height: calc(100vh - 200px);
    overflow: hidden;

    &::after {
        display: block;
        content: '';
        position: absolute;
        top: 140px;
        z-index: -1;
        width: calc(100vw - 350px);
        height: calc(100% - 140px);
        box-shadow: 0 0px 10px rgba(0, 0, 0, .1);
        background: #fff;
        border-radius: 6px;

    }
}

.detail-container {
    position: relative;
    z-index: 9;
    display: flex;
    padding: 35px 0 0 0;
}

.detail-main {
    flex: 1;
    display: flex;
}

.cover {
    width: 250px;
    padding-left: 30px;
    padding-right: 40px;
}

.cover-img {
    width: 250px;
    height: 250px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 0px 10px rgba(0, 0, 0, .1);
}

.detail-info {
    flex: 1;
}

.cover-info {
    flex: 1;
    padding: 30px 0 55px;
    border-radius: 6px;

    .cover-header {
        padding: 0;
        margin: 10px 0;
        font-size: 34px;
        font-weight: bold;
        height: 34px;
        line-height: 34px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        word-break: break-all;
    }
}

.cover-author {
    padding: 40px 0 20px;
    height: 32px;

    .cover-avatar {
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 100%;
        vertical-align: top;
    }

    .cover-name,
    .cover-date {
        display: inline-block;
        padding: 0 10px;
        line-height: 32px;
        height: 32px;
    }

    .cover-avatarIcon {
        padding-left: 5px;
        width: 12px;
        height: 12px;
    }

    .cover-date {
        color: #89878a;
        font-weight: 300;
    }
}

.cover-digital {
    line-height: 0;
    margin: 20px 0;

    span {
        display: inline-flex;
        line-height: 18px;
        padding-right: 20px;
        color: #89878a;
        font-weight: 300;

        .iconfont {
            font-size: 18px;
            padding-right: 5px;
            vertical-align: top;
        }
    }
}

.cover-desc {
    position: relative;
    padding: 10px 0 5px;

    h4 {
        color: #505a68;
        line-height: 14px;
        padding: 20px 0 5px;
        font-weight: 400;
        margin: 0;

        em {
            display: inline-block;
            padding-left: 10px;
            font-style: normal;
            font-size: 12px;
            font-weight: 300;
            color: #89878a;
        }
    }

    p {
        font-weight: 300;
        color: #505a68;
        margin: 0;
    }

    .cover-desc-all {
        line-height: 22px;
        font-size: 14px;
        white-space: pre-line;
        font-family: inherit;
        font-weight: 300;
        word-break: break-all;
        color: #505a68;
        max-height: 800px;
        overflow-y: auto;

        //隐藏滚动条
        &::-webkit-scrollbar {
            display: none;
        }
    }
}

.cover-tags {
    .tag {
        display: inline-block;
        margin: 0 5px 5px 0;
        font-size: 12px;
        font-weight: 300;
        color: #141414;

        &:hover {
            color: #409eff;
        }
    }
}

.song-main {
    position: relative;
    // padding: 0 20px;
    // margin-top: 25px;
    // background: var(--box-background);
    border-radius: 6px;
    // box-shadow: 0 0px 10px rgba(0, 0, 0, .1);
}

.song-header {
    display: flex;
    padding: 20px 0 10px;
    align-items: center;

    h4 {
        flex: 1;
        font-size: 20px;
        line-height: 30px;
        font-weight: 400;
        color: #505a68;

        em {
            display: inline-block;
            padding-left: 10px;
            font-size: 12px;
            line-height: 12px;
            font-style: normal;
            font-weight: 300;
            color: #89878a;
            vertical-align: baseline;
        }
    }

    span {
        display: flex;
        line-height: 16px;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        padding: 7px 20px 7px 16px;
        cursor: pointer;
        margin: 0 0 0 15px;
        transition: all .4s;
        background: rgba(240, 240, 240, .7);
        color: #89878a;
        font-weight: 300;

        i {
            margin-right: 5px;
            color: #89878a;
        }
    }

    .play-all {
        color: #fff;
        background: #409eff;
        height: 25px;

        i {
            color: #fff;
        }
    }

    .collect {
        color: #505a68;
        background: #f3f3f3;
        height: 25px;

        i {
            color: #505a68;
        }
    }

    .collect.active,
    .collect.active i {
        color: #409eff;
    }
}

.showAllSongsTips {
    text-align: center;
    padding: 40px 0;

    span {
        display: inline-block;
        line-height: 16px;
        align-items: center;
        justify-content: center;
        border-radius: 50px;
        padding: 7px 20px;
        color: #fff;
        background: #409eff;
        cursor: pointer;
    }
}

.detail-aside {
    width: 400px;
    margin-left: 40px;
    margin-top: 135px;

    .aside-title {
        font-size: 16px;
        line-height: 16px;
        padding: 0 0 20px;
        color: #141414;

        &::before {
            display: inline-block;
            content: '';
            width: 3px;
            height: 16px;
            margin-right: 5px;
            background: #505a68;
            vertical-align: top;
            border-radius: 6px;
        }
    }

    .songlist {
        .song {
            margin-bottom: 15px;

            .song-img {
                width: 60px;
                height: 60px;
                border-radius: 5px;
            }

            .song-name {
                margin: 5px 10px;
                font-size: 15px;
                color: #333;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }

            .creator-name {
                margin: 10px 10px;
                font-size: 12px;
                color: #666;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }

            &:nth-last-child(1) {
                margin-bottom: 0;
            }
        }
    }

}

.sub-playlist {
    font-size: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .author-home {
        display: inline-block;
        width: 21%;
        font-size: 0;
        border-radius: 6px;
        margin: 10px 0 0;
        overflow: hidden;
    }
}

.recom-main {
    padding-bottom: 30px;

    .el-image {
        width: 60px;
        height: 60px;
        border-radius: 4px;
        overflow: hidden;
    }

    .recom-item {
        display: flex;
        padding: 0 0 20px;
    }

    .recom-info {
        flex: 1;
        padding-left: 10px;
    }

    .recom-name {
        width: 100%;
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        word-break: break-all;
        cursor: pointer;
    }

    .recom-author {
        height: 20px;
        line-height: 20px;
        margin-top: 20px;
        font-size: 12px;
        color: black;

        a {
            color: #666;
        }
    }
}

.comment-main {
    font-size: 0;
    padding-right: 20px;

    .el-image {
        width: 40px;
        height: 40px;
        border-radius: 6px;
        box-shadow: 0 0px 10px rgba(0, 0, 0, .1);
        overflow: hidden;
    }

    .comment-item {
        display: flex;
        padding: 10px 0;
    }

    .comment-info {
        flex: 1;
        padding-left: 10px;
    }

    .comment-userInfo {
        width: 100%;
        font-size: 0;
    }

    .comment-name {
        font-size: 14px;
        line-height: 14px;
        font-weight: bold;
    }

    .comment-desc {
        font-size: 12px;
        color: #505a68;
        line-height: 1.6;
        padding: 5px 10px;
        background: rgba(240, 240, 240, .7);
        margin: 5px 0;
        border-radius: 6px;
        word-break: break-word;
    }

    .comment-date {
        display: inline-block;
        padding-left: 5px;
        font-size: 12px;
        color: #89878a;
    }
}
</style>